<template>
  <view class="container">
    <!-- 搜索区域 -->
    <view class="search-section">
      <view class="search-header">
        <text class="header-title">添加患者</text>
        <text class="header-subtitle">通过手机号或姓名搜索患者</text>
      </view>
      
      <!-- 搜索方式选择 -->
      <view class="search-type-tabs">
        <view 
          class="tab-item" 
          :class="{ active: searchType === 'phone' }"
          @click="switchSearchType('phone')"
        >
          <text class="tab-icon">📱</text>
          <text class="tab-text">手机号</text>
        </view>
        <view 
          class="tab-item" 
          :class="{ active: searchType === 'name' }"
          @click="switchSearchType('name')"
        >
          <text class="tab-icon">👤</text>
          <text class="tab-text">姓名</text>
        </view>
      </view>
      
      <!-- 搜索输入框 -->
      <view class="search-input-wrapper">
        <input 
          v-if="searchType === 'phone'"
          class="search-input" 
          type="number" 
          v-model="searchKeyword"
          placeholder="请输入患者手机号" 
          maxlength="11"
          @confirm="searchPatient"
        />
        <input 
          v-else
          class="search-input" 
          type="text" 
          v-model="searchKeyword"
          placeholder="请输入患者姓名" 
          maxlength="20"
          @confirm="searchPatient"
        />
        <button class="search-btn" @click="searchPatient" :loading="searching">
          搜索
        </button>
      </view>
      
      <!-- 搜索提示 -->
      <view class="search-tips">
        <text class="tip-icon">💡</text>
        <text class="tip-text">只能搜索已注册的患者账号</text>
      </view>
    </view>
    
    <!-- 搜索结果 -->
    <view v-if="searchResult" class="result-section">
      <view class="result-card">
        <!-- 患者基本信息 -->
        <view class="patient-info">
          <image class="avatar" :src="searchResult.avatar || '/static/logo.png'" mode="aspectFill"></image>
          <view class="info-content">
            <view class="name-row">
              <text class="patient-name">{{ searchResult.real_name || '未设置' }}</text>
              <text class="patient-tag" v-if="searchResult.has_detail !== false">{{ searchResult.gender_text }} {{ searchResult.age }}岁</text>
              <text class="patient-tag-warning" v-else>未建档</text>
            </view>
            <view class="detail-row">
              <text class="detail-item">📱 {{ searchResult.phone }}</text>
            </view>
            <view class="detail-row" v-if="searchResult.id_card">
              <text class="detail-item">🆔 {{ formatIdCard(searchResult.id_card) }}</text>
            </view>
            <view class="detail-row" v-if="searchResult.need_complete">
              <text class="detail-warning">⚠️ 患者未完善详细信息，请先为其建档</text>
            </view>
          </view>
        </view>
        
        <!-- 绑定状态 -->
        <view class="bind-status">
          <view v-if="searchResult.is_bound" class="status-tag bound">
            <text class="status-icon">✓</text>
            <text class="status-text">已绑定</text>
          </view>
          <view v-else class="status-tag unbind">
            <text class="status-icon">○</text>
            <text class="status-text">未绑定</text>
          </view>
        </view>
        
        <!-- 操作按钮 -->
        <view class="action-section">
          <!-- 情况1: 未建档 - 显示建档按钮 -->
          <button 
            v-if="searchResult.need_complete && !showProfileForm" 
            class="create-profile-btn"
            @click="showProfileForm = true"
          >
            📝 帮TA建档
          </button>
          
          <!-- 情况2: 已建档且未绑定 - 显示绑定按钮 -->
          <button 
            v-if="!searchResult.need_complete && !searchResult.is_bound" 
            class="bind-btn" 
            @click="bindPatient"
            :loading="binding"
          >
            绑定患者
          </button>
          
          <!-- 情况3: 已绑定 - 显示解绑按钮 -->
          <button 
            v-if="searchResult.is_bound" 
            class="unbind-btn" 
            @click="unbindPatient"
            :loading="unbinding"
          >
            解除绑定
          </button>
        </view>
        
        <!-- 展开的建档表单 -->
        <view v-if="showProfileForm && searchResult.need_complete" class="profile-form-section">
          <view class="form-header">
            <text class="form-title">📋 完善患者信息</text>
            <text class="form-subtitle">填写以下信息为患者建档</text>
          </view>
          
          <view class="form-body">
            <!-- 自动填充的只读字段 -->
            <view class="form-item readonly-item">
              <text class="label">姓名</text>
              <text class="value">{{ searchResult.real_name || '未设置' }}</text>
            </view>
            
            <view class="form-item readonly-item">
              <text class="label">手机号</text>
              <text class="value">{{ searchResult.phone }}</text>
            </view>
            
            <!-- 需要填写的字段 -->
            <view class="form-item">
              <text class="label">性别<text class="required">*</text></text>
              <radio-group class="radio-group" @change="onGenderChange">
                <label class="radio-label">
                  <radio value="1" :checked="profileForm.gender === 1" color="#88D5CB" />
                  <text>男</text>
                </label>
                <label class="radio-label">
                  <radio value="0" :checked="profileForm.gender === 0" color="#88D5CB" />
                  <text>女</text>
                </label>
              </radio-group>
            </view>
            
            <view class="form-item">
              <text class="label">年龄<text class="required">*</text></text>
              <input 
                class="input" 
                type="number" 
                v-model="profileForm.age" 
                placeholder="请输入年龄（1-120）"
                maxlength="3"
              />
            </view>
            
            <view class="form-item">
              <text class="label">身份证号<text class="required">*</text></text>
              <input 
                class="input" 
                type="idcard" 
                v-model="profileForm.id_card" 
                placeholder="请输入18位身份证号"
                maxlength="18"
              />
            </view>
          </view>
          
          <view class="form-footer">
            <button class="cancel-btn" @click="cancelCreateProfile">取消</button>
            <button class="submit-btn" @click="submitPatientProfile" :loading="submitting">
              提交并绑定
            </button>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view v-else-if="searched && !searchResult" class="create-account-section">
      <!-- 创建提示（点击按钮后隐藏） -->
      <view v-if="!showNewAccountForm">
        <!-- 顶部提示 -->
        <view class="create-header">
          <text class="create-icon">👤</text>
          <text class="create-title">患者未注册</text>
          <text class="create-subtitle">该{{ searchType === 'phone' ? '手机号' : '姓名' }}尚未注册账号</text>
        </view>
        
        <!-- 创建账号提示和按钮 -->
        <view class="create-prompt">
          <text class="prompt-text">您可以为患者创建账号，创建后将自动绑定到您</text>
          <button class="confirm-create-btn" @click="confirmCreateAccount">
            <text class="btn-icon">✓</text>
            <text class="btn-text">创建并绑定患者</text>
          </button>
        </view>
      </view>
      
      <!-- 新建账号表单 -->
      <view v-if="showNewAccountForm" class="new-account-form">
        <view class="form-header">
          <text class="form-title">📝 创建患者账号</text>
          <text class="form-subtitle">填写完整信息后将自动绑定到您</text>
        </view>
        
        <view class="form-body">
          <!-- 手机号（只读，从搜索关键词自动填充） -->
          <view class="form-item readonly-item" v-if="searchType === 'phone'">
            <text class="label">手机号 <text class="required">*</text></text>
            <text class="value">{{ searchKeyword }}</text>
          </view>
          
          <!-- 手机号（可编辑，如果是姓名搜索） -->
          <view class="form-item" v-else>
            <text class="label">手机号 <text class="required">*</text></text>
            <input 
              class="input" 
              type="number" 
              v-model="newAccountForm.phone"
              placeholder="请输入患者手机号" 
              maxlength="11"
            />
          </view>
          
          <!-- 姓名 -->
          <view class="form-item">
            <text class="label">姓名 <text class="required">*</text></text>
            <input 
              class="input" 
              type="text" 
              v-model="newAccountForm.real_name"
              :placeholder="searchType === 'name' ? searchKeyword : '请输入患者姓名'"
              maxlength="20"
            />
          </view>
          
          <!-- 性别 -->
          <view class="form-item">
            <text class="label">性别 <text class="required">*</text></text>
            <radio-group class="radio-group" @change="onNewAccountGenderChange">
              <label class="radio-label">
                <radio value="1" :checked="newAccountForm.gender === 1" color="#2db5a3" />
                男
              </label>
              <label class="radio-label">
                <radio value="0" :checked="newAccountForm.gender === 0" color="#2db5a3" />
                女
              </label>
            </radio-group>
          </view>
          
          <!-- 年龄 -->
          <view class="form-item">
            <text class="label">年龄 <text class="required">*</text></text>
            <input 
              class="input" 
              type="number" 
              v-model="newAccountForm.age"
              placeholder="请输入年龄" 
              maxlength="3"
            />
          </view>
          
          <!-- 身份证号 -->
          <view class="form-item">
            <text class="label">身份证号 <text class="required">*</text></text>
            <input 
              class="input" 
              type="idcard" 
              v-model="newAccountForm.id_card"
              placeholder="请输入身份证号" 
              maxlength="18"
            />
          </view>
        </view>
        
        <view class="form-footer">
          <button class="cancel-btn" @click="cancelCreateAccount">取消</button>
          <button class="submit-btn" @click="submitCreateAccount" :loading="creatingAccount" :disabled="creatingAccount">
            提交并绑定
          </button>
        </view>
      </view>
    </view>
    
    <!-- 使用说明 -->
    <view class="instruction-section">
      <view class="instruction-title">
        <text class="title-icon">📖</text>
        <text class="title-text">使用说明</text>
      </view>
      <view class="instruction-list">
        <view class="instruction-item">
          <text class="item-number">1</text>
          <text class="item-text">患者需要先在小程序中注册登录</text>
        </view>
        <view class="instruction-item">
          <text class="item-number">2</text>
          <text class="item-text">使用患者的手机号或姓名进行搜索</text>
        </view>
        <view class="instruction-item">
          <text class="item-number">3</text>
          <text class="item-text">找到患者后点击"绑定患者"即可添加</text>
        </view>
        <view class="instruction-item">
          <text class="item-number">4</text>
          <text class="item-text">绑定后可以为患者进行测评和查看报告</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { searchPatientByPhone, searchPatientByName, bindPatientToDoctor, unbindPatientFromDoctor, createPatientProfile, createPatientAccount } from '../../utils/api/doctor.js';
import { getLoginStatus } from '../../utils/auth.js';

export default {
  data() {
    return {
      searchType: 'phone', // 'phone' 或 'name'
      searchKeyword: '',
      searching: false,
      searched: false,
      searchResult: null,
      binding: false,
      unbinding: false,
      // 建档表单相关（为已注册患者建档）
      showProfileForm: false,
      submitting: false,
      profileForm: {
        gender: null,
        age: '',
        id_card: ''
      },
      // 新建账号表单相关（为未注册患者创建完整账号）
      showNewAccountForm: false,
      creatingAccount: false,
      newAccountForm: {
        phone: '',
        real_name: '',
        gender: null,
        age: '',
        id_card: ''
      }
    };
  },
  
  onLoad() {
    this.checkDoctorAuth();
  },
  
  methods: {
    // 检查医生权限
    checkDoctorAuth() {
      const loginStatus = getLoginStatus();
      if (loginStatus.userType !== 'doctor') {
        uni.showToast({
          title: '仅医生可访问',
          icon: 'none'
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    },
    
    // 切换搜索类型
    switchSearchType(type) {
      this.searchType = type;
      this.searchKeyword = '';
      this.searchResult = null;
      this.searched = false;
    },
    
    // 搜索患者
    async searchPatient() {
      // 验证输入
      if (!this.searchKeyword) {
        uni.showToast({
          title: `请输入${this.searchType === 'phone' ? '手机号' : '姓名'}`,
          icon: 'none'
        });
        return;
      }
      
      // 验证格式
      if (this.searchType === 'phone') {
        const phoneReg = /^1[3-9]\d{9}$/;
        if (!phoneReg.test(this.searchKeyword)) {
          uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none'
          });
          return;
        }
      } else {
        // 姓名验证：2-20个字符，支持中文、英文和·
        const nameReg = /^[\u4e00-\u9fa5a-zA-Z·]{2,20}$/;
        if (!nameReg.test(this.searchKeyword)) {
          uni.showToast({
            title: '请输入正确的姓名（2-20个字符）',
            icon: 'none'
          });
          return;
        }
      }
      
      try {
        this.searching = true;
        console.log('搜索患者:', this.searchType, this.searchKeyword);
        
        let response;
        if (this.searchType === 'phone') {
          response = await searchPatientByPhone(this.searchKeyword);
        } else {
          response = await searchPatientByName(this.searchKeyword);
        }
        
        console.log('搜索结果:', response);
        console.log('响应数据详情:', {
          code: response.code,
          hasData: !!response.data,
          dataKeys: response.data ? Object.keys(response.data) : [],
          hasPatients: response.data && response.data.patients,
          patientsLength: response.data && response.data.patients ? response.data.patients.length : 0
        });
        
        if (response.code === 200 && response.data && response.data.patients && response.data.patients.length > 0) {
          // 后端返回的是患者数组，取第一个结果
          const patient = response.data.patients[0];
          console.log('第一个患者原始数据:', patient);
          
          // 判断患者是否需要完善信息（建档）
          // 如果年龄、性别、身份证号任一为空，则需要建档
          const needComplete = !patient.age || !patient.gender || !patient.id_card;
          const hasDetail = !needComplete;
          
          console.log('患者信息完整性检查:', {
            age: patient.age,
            gender: patient.gender,
            id_card: patient.id_card,
            needComplete,
            hasDetail
          });
          
          this.searchResult = {
            user_id: patient.patient_id,
            real_name: patient.real_name,
            phone: patient.phone,
            gender_text: patient.gender,
            age: patient.age,
            avatar: patient.avatar,
            is_bound: patient.is_bound,
            id_card: patient.id_card || '',
            need_complete: needComplete,  // 是否需要完善信息
            has_detail: hasDetail  // 是否已有详细信息
          };
          this.searched = true;
          
          console.log('✅ searchResult 已设置:', this.searchResult);
          console.log('✅ searched 状态:', this.searched);
          
          uni.showToast({
            title: `找到患者${response.data.total > 1 ? '（显示第一个）' : ''}`,
            icon: 'success'
          });
        } else {
          this.searchResult = null;
          this.searched = true;
          
          // 重置表单展开状态
          this.showNewAccountForm = false;
        }
      } catch (error) {
        console.error('搜索失败:', error);
        this.searchResult = null;
        this.searched = true;
        
        uni.showToast({
          title: error.message || '搜索失败',
          icon: 'none'
        });
      } finally {
        this.searching = false;
      }
    },
    
    // 绑定患者
    async bindPatient() {
      if (!this.searchResult) return;
      
      try {
        this.binding = true;
        console.log('绑定患者:', this.searchResult.user_id);
        
        const response = await bindPatientToDoctor(this.searchResult.user_id);
        
        if (response.code === 200) {
          uni.showToast({
            title: '绑定成功',
            icon: 'success'
          });
          
          // 更新绑定状态
          this.searchResult.is_bound = true;
          
          // 延迟返回患者列表
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          throw new Error(response.msg || '绑定失败');
        }
      } catch (error) {
        console.error('绑定失败:', error);
        uni.showToast({
          title: error.message || '绑定失败',
          icon: 'none'
        });
      } finally {
        this.binding = false;
      }
    },
    
    // 解除绑定
    async unbindPatient() {
      if (!this.searchResult) return;
      
      // 确认对话框
      const confirm = await new Promise((resolve) => {
        uni.showModal({
          title: '确认解除绑定',
          content: '解除绑定后，将无法查看该患者的测评记录',
          success: (res) => resolve(res.confirm)
        });
      });
      
      if (!confirm) return;
      
      try {
        this.unbinding = true;
        console.log('解除绑定患者:', this.searchResult.user_id);
        
        const response = await unbindPatientFromDoctor(this.searchResult.user_id);
        
        if (response.code === 200) {
          uni.showToast({
            title: '已解除绑定',
            icon: 'success'
          });
          
          // 更新绑定状态
          this.searchResult.is_bound = false;
        } else {
          throw new Error(response.msg || '解除绑定失败');
        }
      } catch (error) {
        console.error('解除绑定失败:', error);
        uni.showToast({
          title: error.message || '解除绑定失败',
          icon: 'none'
        });
      } finally {
        this.unbinding = false;
      }
    },
    
    // 性别变更
    onGenderChange(e) {
      this.profileForm.gender = parseInt(e.detail.value);
      console.log('选择性别:', this.profileForm.gender);
    },
    
    // 取消建档
    cancelCreateProfile() {
      this.showProfileForm = false;
      this.profileForm = {
        gender: null,
        age: '',
        id_card: ''
      };
    },
    
    // 验证身份证号格式（测试版：放宽限制）
    validateIdCard(idCard) {
      // 测试模式：只要求6-18位数字或字母X即可
      const testReg = /^[\dXx]{6,18}$/;
      return testReg.test(idCard);
      
      // 生产环境可以使用严格验证：
      // const reg18 = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
      // const reg15 = /^[1-9]\d{5}\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}$/;
      // return reg18.test(idCard) || reg15.test(idCard);
    },
    
    // 提交患者建档信息
    async submitPatientProfile() {
      // 验证表单
      if (!this.profileForm.gender) {
        uni.showToast({
          title: '请选择性别',
          icon: 'none'
        });
        return;
      }
      
      if (!this.profileForm.age || this.profileForm.age < 1 || this.profileForm.age > 120) {
        uni.showToast({
          title: '请输入正确的年龄（1-120）',
          icon: 'none'
        });
        return;
      }
      
      if (!this.profileForm.id_card) {
        uni.showToast({
          title: '请输入身份证号',
          icon: 'none'
        });
        return;
      }
      
      if (!this.validateIdCard(this.profileForm.id_card)) {
        uni.showToast({
          title: '请输入正确的身份证号',
          icon: 'none'
        });
        return;
      }
      
      try {
        this.submitting = true;
        console.log('提交建档信息:', {
          user_id: this.searchResult.user_id,
          phone: this.searchResult.phone,
          ...this.profileForm
        });
        
        // 调用建档API
        const response = await createPatientProfile({
          user_id: this.searchResult.user_id,
          phone: this.searchResult.phone,
          gender: this.profileForm.gender,
          age: parseInt(this.profileForm.age),
          id_card: this.profileForm.id_card
        });
        
        console.log('建档响应:', response);
        
        if (response.code === 200) {
          uni.showToast({
            title: '建档成功',
            icon: 'success',
            duration: 1500
          });
          
          // 更新搜索结果状态
          this.searchResult.need_complete = false;
          this.searchResult.has_detail = true;
          this.searchResult.gender_text = this.profileForm.gender === 1 ? '男' : '女';
          this.searchResult.age = this.profileForm.age;
          this.searchResult.id_card = this.profileForm.id_card;
          
          // 关闭表单
          this.showProfileForm = false;
          
          // 重置表单
          this.profileForm = {
            gender: null,
            age: '',
            id_card: ''
          };
          
          // 建档成功后自动绑定患者
          setTimeout(() => {
            this.bindPatient();
          }, 500);
        } else {
          throw new Error(response.msg || '建档失败');
        }
      } catch (error) {
        console.error('建档失败:', error);
        uni.showToast({
          title: error.message || '建档失败',
          icon: 'none'
        });
      } finally {
        this.submitting = false;
      }
    },
    
    // 格式化身份证号（中间部分显示为星号）
    formatIdCard(idCard) {
      if (!idCard) return '';
      if (idCard.length === 18) {
        return idCard.substring(0, 6) + '********' + idCard.substring(14);
      } else if (idCard.length === 15) {
        return idCard.substring(0, 6) + '*****' + idCard.substring(11);
      }
      return idCard;
    },
    
    // ========== 新建患者账号相关方法 ==========
    
    // 确认创建账号（展开表单）
    confirmCreateAccount() {
      this.showNewAccountForm = true;
      
      // 如果是手机号搜索，自动填充
      if (this.searchType === 'phone') {
        this.newAccountForm.phone = this.searchKeyword;
      }
    },
    
    // 新建账号 - 性别变更
    onNewAccountGenderChange(e) {
      this.newAccountForm.gender = parseInt(e.detail.value);
      console.log('新建账号 - 选择性别:', this.newAccountForm.gender);
    },
    
    // 取消创建账号
    cancelCreateAccount() {
      this.showNewAccountForm = false;
      this.newAccountForm = {
        phone: '',
        real_name: '',
        gender: null,
        age: '',
        id_card: ''
      };
    },
    
    // 提交创建患者账号
    async submitCreateAccount() {
      // 确定手机号（如果是手机号搜索，使用搜索关键词；否则使用表单输入）
      const phone = this.searchType === 'phone' ? this.searchKeyword : this.newAccountForm.phone;
      
      // 验证手机号
      if (!phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        });
        return;
      }
      
      const phoneReg = /^1[3-9]\d{9}$/;
      if (!phoneReg.test(phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }
      
      // 验证姓名
      if (!this.newAccountForm.real_name) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        });
        return;
      }
      
      // 验证性别
      if (!this.newAccountForm.gender) {
        uni.showToast({
          title: '请选择性别',
          icon: 'none'
        });
        return;
      }
      
      // 验证年龄
      if (!this.newAccountForm.age || this.newAccountForm.age < 1 || this.newAccountForm.age > 120) {
        uni.showToast({
          title: '请输入正确的年龄（1-120）',
          icon: 'none'
        });
        return;
      }
      
      // 验证身份证号
      if (!this.newAccountForm.id_card) {
        uni.showToast({
          title: '请输入身份证号',
          icon: 'none'
        });
        return;
      }
      
      if (!this.validateIdCard(this.newAccountForm.id_card)) {
        uni.showToast({
          title: '请输入正确的身份证号',
          icon: 'none'
        });
        return;
      }
      
      try {
        this.creatingAccount = true;
        console.log('创建患者完整账号:', {
          phone: phone,
          real_name: this.newAccountForm.real_name,
          gender: this.newAccountForm.gender,
          age: this.newAccountForm.age,
          id_card: this.newAccountForm.id_card
        });
        
        const response = await createPatientAccount({
          phone: phone,
          real_name: this.newAccountForm.real_name,
          gender: this.newAccountForm.gender,
          age: parseInt(this.newAccountForm.age),
          id_card: this.newAccountForm.id_card
        });
        
        console.log('创建账号响应:', response);
        
        if (response.code === 200) {
          uni.showToast({
            title: '患者账号创建成功并已自动绑定',
            icon: 'success',
            duration: 2000
          });
          
          // 隐藏表单
          this.showNewAccountForm = false;
          
          // 清空表单
          this.newAccountForm = {
            phone: '',
            real_name: '',
            gender: null,
            age: '',
            id_card: ''
          };
          
          // 1.5秒后返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          throw new Error(response.msg || '创建账号失败');
        }
      } catch (error) {
        console.error('创建账号失败:', error);
        uni.showToast({
          title: error.message || '创建账号失败',
          icon: 'none'
        });
      } finally {
        this.creatingAccount = false;
      }
    }
  }
};
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

/* 搜索区域 */
.search-section {
  background-color: #fff;
  padding: 40rpx 30rpx;
  margin-bottom: 20rpx;
}

.search-header {
  margin-bottom: 30rpx;
}

.header-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.header-subtitle {
  font-size: 26rpx;
  color: #999;
}

/* 搜索类型选择 */
.search-type-tabs {
  display: flex;
  margin-bottom: 30rpx;
  border-radius: 12rpx;
  overflow: hidden;
  border: 2rpx solid #e5e5e5;
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  background-color: #fff;
  transition: all 0.3s;
}

.tab-item.active {
  background-color: #2db5a3;
}

.tab-icon {
  font-size: 32rpx;
  margin-right: 10rpx;
}

.tab-text {
  font-size: 28rpx;
  color: #666;
}

.tab-item.active .tab-text {
  color: #fff;
  font-weight: bold;
}

/* 搜索输入 */
.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.search-input {
  flex: 1;
  height: 88rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
}

.search-btn {
  width: 160rpx;
  height: 88rpx;
  background-color: #2db5a3;
  color: #fff;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: bold;
  border: none;
  line-height: 88rpx;
}

.search-btn::after {
  border: none;
}

/* 搜索提示 */
.search-tips {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff9e6;
  border-radius: 12rpx;
}

.tip-icon {
  font-size: 32rpx;
  margin-right: 10rpx;
}

.tip-text {
  font-size: 24rpx;
  color: #ff9800;
}

/* 结果卡片 */
.result-section {
  padding: 0 30rpx;
}

.result-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.patient-info {
  display: flex;
  margin-bottom: 30rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 20rpx;
}

.info-content {
  flex: 1;
}

.name-row {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.patient-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 15rpx;
}

.patient-tag {
  padding: 6rpx 20rpx;
  background-color: #e3f2fd;
  color: #2196f3;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.patient-tag-warning {
  padding: 6rpx 20rpx;
  background-color: #fff3e0;
  color: #ff9800;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: bold;
}

.detail-row {
  margin-bottom: 10rpx;
}

.detail-item {
  font-size: 26rpx;
  color: #666;
}

.detail-warning {
  font-size: 24rpx;
  color: #ff9800;
  background-color: #fff3e0;
  padding: 10rpx 15rpx;
  border-radius: 6rpx;
  display: inline-block;
}

/* 绑定状态 */
.bind-status {
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
}

.status-tag {
  display: flex;
  align-items: center;
  padding: 15rpx 40rpx;
  border-radius: 30rpx;
}

.status-tag.bound {
  background-color: #e8f5e9;
  color: #4caf50;
}

.status-tag.unbind {
  background-color: #fff3e0;
  color: #ff9800;
}

.status-icon {
  font-size: 28rpx;
  margin-right: 10rpx;
}

.status-text {
  font-size: 28rpx;
  font-weight: bold;
}

/* 操作按钮 */
.action-section {
  display: flex;
  gap: 20rpx;
}

.bind-btn,
.unbind-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: bold;
  border: none;
}

.bind-btn {
  background-color: #2db5a3;
  color: #fff;
}

.unbind-btn {
  background-color: #ff5252;
  color: #fff;
}

.bind-btn::after,
.unbind-btn::after {
  border: none;
}

/* 空状态 */
/* 创建账号区域 */
.create-account-section {
  padding: 40rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.create-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 40rpx 40rpx;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f7ff 100%);
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  max-width: 650rpx;
  width: 100%;
}

.create-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
  opacity: 0.8;
}

.create-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.create-subtitle {
  font-size: 26rpx;
  color: #999;
}

/* 创建提示区域 */
.create-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
  gap: 30rpx;
  max-width: 650rpx;
  width: 100%;
}

.prompt-text {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  line-height: 1.6;
}

/* 确认创建按钮 */
.confirm-create-btn {
  width: 500rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  background: linear-gradient(135deg, #6BB6FF 0%, #88D5CB 100%);
  border-radius: 45rpx;
  border: none;
  box-shadow: 0 8rpx 24rpx rgba(107, 182, 255, 0.4);
  transition: all 0.3s ease;
}

.confirm-create-btn::after {
  border: none;
}

.confirm-create-btn:active {
  transform: scale(0.97);
  box-shadow: 0 4rpx 12rpx rgba(107, 182, 255, 0.3);
}

.btn-icon {
  font-size: 36rpx;
  color: #fff;
  font-weight: bold;
}

.btn-text {
  font-size: 30rpx;
  color: #fff;
  font-weight: bold;
}

/* 使用说明 */
.instruction-section {
  background-color: #fff;
  margin: 20rpx 30rpx;
  padding: 30rpx;
  border-radius: 20rpx;
}

.instruction-title {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
}

.title-icon {
  font-size: 32rpx;
  margin-right: 10rpx;
}

.title-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.instruction-list {
  padding-left: 10rpx;
}

.instruction-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.item-number {
  display: inline-block;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background-color: #2db5a3;
  color: #fff;
  border-radius: 50%;
  font-size: 24rpx;
  font-weight: bold;
  margin-right: 15rpx;
  flex-shrink: 0;
}

.item-text {
  flex: 1;
  font-size: 26rpx;
  color: #666;
  line-height: 40rpx;
}

/* 建档按钮样式 */
.create-profile-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: bold;
  border: none;
  background: linear-gradient(135deg, #88D5CB 0%, #6BB6FF 100%);
  color: #fff;
  box-shadow: 0 4rpx 16rpx rgba(136, 213, 203, 0.3);
}

.create-profile-btn::after {
  border: none;
}

.create-profile-btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

/* 建档表单区域 */
.profile-form-section {
  margin-top: 30rpx;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4f8 100%);
  border-radius: 16rpx;
  padding: 30rpx;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-header {
  margin-bottom: 30rpx;
  text-align: center;
}

.form-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.form-subtitle {
  font-size: 24rpx;
  color: #999;
}

.form-body {
  margin-bottom: 30rpx;
}

.form-item {
  margin-bottom: 25rpx;
}

.form-item.readonly-item {
  background: rgba(255, 255, 255, 0.5);
  padding: 20rpx 20rpx;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  align-items: flex-start;
}

.label {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
  display: block;
  margin-bottom: 15rpx;
  padding-left: 20rpx;
}

.readonly-item .label {
  margin-bottom: 0;
  color: #666;
  font-weight: 500;
  font-size: 24rpx;
  padding-left: 0;
}

.readonly-item .value {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
  letter-spacing: 1rpx;
}

.required {
  color: #ff5252;
  margin-left: 4rpx;
}

.radio-group {
  display: flex;
  gap: 40rpx;
  margin-left: 20rpx;
}

.radio-label {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #333;
}

.radio-label radio {
  margin-right: 10rpx;
}

.input {
  width: 100%;
  height: 80rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  border: 2rpx solid #e0e0e0;
  transition: all 0.3s;
  box-sizing: border-box;
}

.input:focus {
  border-color: #88D5CB;
  background: rgba(136, 213, 203, 0.05);
}

.form-footer {
  display: flex;
  gap: 20rpx;
}

.cancel-btn,
.submit-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: bold;
  border: none;
}

.cancel-btn {
  background: #fff;
  color: #666;
  border: 2rpx solid #e0e0e0 !important;
}

.cancel-btn::after {
  border: none;
}

.cancel-btn:active {
  background: #f5f5f5;
}

.submit-btn {
  background: linear-gradient(135deg, #88D5CB 0%, #6BB6FF 100%);
  color: #fff;
  box-shadow: 0 4rpx 16rpx rgba(136, 213, 203, 0.3);
}

.submit-btn::after {
  border: none;
}

.submit-btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

/* 新建账号按钮样式 */
/* 新建账号表单区域 */
.new-account-form {
  margin: 30rpx auto 0;
  max-width: 650rpx;
  width: 100%;
  background: linear-gradient(135deg, #fff 0%, #f8fcff 100%);
  border-radius: 20rpx;
  padding: 40rpx 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(107, 182, 255, 0.15);
  animation: slideDown 0.3s ease;
}
</style>

